<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=width-device,initial-scale=1,user-scalable=no" />
		<title>上传头像</title>
		<link rel="stylesheet" type="text/css" href="js/head/css/bootstrap.min.css">
		<link href="js/head/head/cropper.min.css" rel="stylesheet">
		<link href="js/head/head/sitelogo.css" rel="stylesheet">
		<link rel="stylesheet" type="text/css" href="js/head/css/font-awesome.min.css">
	</head>

	<body>
		<div class="container">
			<ol class="breadcrumb">
				<li><a href="#">个人中心</a></li>
				<li><a href="#">头像管理</a></li>
				<li>上传头像</li>
			</ol>

			<!--头像预览图-->
			<img src="" id="headImg" class="img-responsive" style="margin: 10px; width: 200px ; height: 200px; border-radius: 10%;" />
			<!--按钮-->
			<input type="hidden" id="PicData" name="PicData" />
			<input type="button" value="选择头像" class="btn btn-primary" data-toggle="modal" data-target="#avatar-modal" />
			<input type="button" value="上传新头像" class="btn btn-success" id="upload-btn" />
		</div>
		<!--头像剪裁区开始-->
		<div class="modal fade" id="avatar-modal" aria-hidden="true" aria-labelledby="avatar-modal-label" role="dialog" tabindex="-1">
			<div class="modal-dialog modal-lg">
				<div class="modal-content">
					<!--<form class="avatar-form" action="upload-logo.php" enctype="multipart/form-data" method="post">-->
					<form class="avatar-form">
						<div class="modal-header">
							<button class="close" data-dismiss="modal" type="button">&times;</button>
							<h4 class="modal-title" id="avatar-modal-label">上传图片</h4>
						</div>
						<div class="modal-body">
							<div class="avatar-body">
								<div class="avatar-upload">
									<input class="avatar-src" name="avatar_src" type="hidden">
									<input class="avatar-data" name="avatar_data" type="hidden">
									<label for="avatarInput" style="line-height: 35px;">图片上传</label>
									<button class="btn btn-danger" type="button" style="height: 35px;" onClick="$('input[id=avatarInput]').click();">请选择图片</button>
									<span id="avatar-name"></span>
									<input class="avatar-input hide" id="avatarInput" name="avatar_file" type="file"></div>
								<div class="row">
									<div class="col-md-9">
										<div class="avatar-wrapper"></div>
									</div>
									<div class="col-md-3">
										<div class="avatar-preview preview-lg" id="imageHead"></div>
										<div class="avatar-preview preview-md"></div>
										<div class="avatar-preview preview-sm"></div>
									</div>
								</div>
								<div class="row avatar-btns">
									<div class="col-md-4">
										<div class="btn-group">
											<button class="btn btn-danger fa fa-undo" data-method="rotate" data-option="-90" type="button" title="Rotate -90 degrees"> 向左旋转</button>
										</div>
										<div class="btn-group">
											<button class="btn  btn-danger fa fa-repeat" data-method="rotate" data-option="90" type="button" title="Rotate 90 degrees"> 向右旋转</button>
										</div>
									</div>
									<div class="col-md-5" style="text-align: right;">
										<button class="btn btn-danger fa fa-arrows" data-method="setDragMode" data-option="move" type="button" title="移动">
								<span class="docs-tooltip" data-toggle="tooltip" title="" data-original-title="$().cropper(&quot;setDragMode&quot;, &quot;move&quot;)">
								</span>
							  </button>
										<button type="button" class="btn btn-danger fa fa-search-plus" data-method="zoom" data-option="0.1" title="放大图片">
								<span class="docs-tooltip" data-toggle="tooltip" title="" data-original-title="$().cropper(&quot;zoom&quot;, 0.1)">
								  <!--<span class="fa fa-search-plus"></span>-->
								</span>
							  </button>
										<button type="button" class="btn btn-danger fa fa-search-minus" data-method="zoom" data-option="-0.1" title="缩小图片">
								<span class="docs-tooltip" data-toggle="tooltip" title="" data-original-title="$().cropper(&quot;zoom&quot;, -0.1)">
								  <!--<span class="fa fa-search-minus"></span>-->
								</span>
							  </button>
										<button type="button" class="btn btn-danger fa fa-refresh" data-method="reset" title="重置图片">
									<span class="docs-tooltip" data-toggle="tooltip" title="" data-original-title="$().cropper(&quot;reset&quot;)" aria-describedby="tooltip866214">
									</span>
							   </button>
									</div>
									<div class="col-md-3">
										<button class="btn btn-danger btn-block avatar-save fa fa-save" type="button" data-dismiss="modal"> 保存修改</button>
									</div>
								</div>
							</div>
						</div>
					</form>
				</div>
			</div>
		</div>
		
		
		<script src="js/jquery-1.11.2.min.js"></script>
		<script src="js/head/head/bootstrap.min.js"></script>
		<script src="js/head/head/cropper.js"></script>
		<script src="js/head/head/sitelogo.js"></script>
		<script src="js/head/head/html2canvas.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/global.js"></script>
		<script src="js/layer/extend/layer.ext.js"></script>
		<script src="js/layer/layer.js"></script> 
		<script src="js/param.js"></script>
		<script>
			$(function() {
				
				if(localStorage.getItem('Pic')){
					$('#headImg').attr('src',localStorage.getItem('Pic'));
				}else{
					$('#headImg').attr('src','images/default.jpg');
				}
				
				//图片选择事件
				 $('#avatarInput').on('change', function(e) {
					var filemaxsize = 1024 * 5; //5M
					var target = $(e.target);
					var Size = target[0].files[0].size / 1024;
					if (Size > filemaxsize) {
						alert('图片过大，请重新选择!');
						$(".avatar-wrapper").childre().remove;
						return false;
					}
					if (!this.files[0].type.match(/image.*/)) {
						alert('请选择正确的图片!')
					} else {
						var filename = document.querySelector("#avatar-name");
						var texts = document.querySelector("#avatarInput").value;
						var teststr = texts; //你这里的路径写错了
						testend = teststr.match(/[^\\]+\.[^\(]+/i); //直接完整文件名的
						filename.innerHTML = testend;
					}

				}); 
				//保存修改按钮事件
				 $(".avatar-save").on("click", function() {
					var img_lg = document.getElementById('imageHead');
					// 截图小的显示框内的内容
					html2canvas(img_lg, {
						allowTaint: true,
						taintTest: false,
						onrendered: function(canvas) {
							canvas.id = "mycanvas";
							//生成base64图片数据
							var dataUrl = canvas.toDataURL("image/jpeg");
							var newImg = document.createElement("img");
							newImg.src = dataUrl;
							//显示预览图片
							$('#headImg').attr('src',dataUrl);
							$('#PicData').val(dataUrl);
						}
					});
				}); 
				
				//提交按钮
				 $('#upload-btn').click(function(){
					
					
					if($('#PicData').val() == ''){
						layer.msg("头像未发生变化");
						return false;
					}
					layer.load(1);//加载层
					//ajax请求
					$.post(baseUrl+'/user/updateUserPic',{Pic:$('#PicData').val()},function(data){
						layer.closeAll();
						
						localStorage.setItem('Pic',$('#PicData').val());
						layer.msg('修改头像成功');
						setTimeout(function(){
							
							window.parent.layer.closeAll();
							window.parent.location.reload();
						},500);
						
						
					}).error(function(xhr,status,text){
						layer.msg('请求失败，'+xhr.status);
					});
					
				}); 
				
				
			});
		</script>
	</body>

</html>
